<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滑动导航实例</title>
		<meta http-equiv="keywords" content="">
	    <meta http-equiv="description" content="">
	    <!--<meta http-equiv="X-UA-Compatible" content=“IE=EmulateIE8″>-->
	    <meta http-equiv="X-UA-Compatible" content=”IE=Edge,chrome=1″ />
	    <meta name="renderer" content="webkit">
	    <link rel="stylesheet" href="style/css/base/MyReset.css" />
	    <link rel="stylesheet" href="style/css/common/common.css" />
	    <link rel="stylesheet" href="style/css/common/main.css" />
	    <link rel="stylesheet" href="style/css/common/slideMenu.css" />
	    <link rel="stylesheet" href="style/css/page/hoverNav.css" />
	</head>
	<body>
		<div class="Ct">
			<p class="marginTop20">
				<label class="fontSize16 fontWeight color_3">类型一</label>
			</p>
			<div class="navDiv1 marginTop">
				<ul id="navSy1">
					<li><a href="#">首页</a>
					    <ul>
					      <li><a href="#">Personal</a></li>
					      <li><a href="#">Group</a></li>
					      <li><a href="#">Administrator</a></li>
					    </ul>
					</li>
					<li><a href="#">管理视图 </a>
					    <ul>
					      <li><a href="#">分公司</a></li>
					      <li><a href="#">网络部</a></li>
					    </ul>
					</li>
					<li><a href="#">客户视图 </a>
					    <ul>
					      <li><a href="#">sub menu one</a></li>
					      <li><a href="#">sub menu one</a></li>
					      <li><a href="#">sub menu one</a></li>
					    </ul>
					</li>
					<li><a href="#">管理分析专题 </a>
					    <ul>
					      <li><a href="#">sub menu one</a></li>
					      <li><a href="#">sub menu one</a></li>
					      <li><a href="#">sub menu one</a></li>
					    </ul>
					</li>
					<li><a href="#">生产支撑专题 </a>
					    <ul>
					      <li><a href="#">sub menu one</a></li>
					      <li><a href="#">sub menu one</a></li>
					      <li><a href="#">sub menu one</a></li>
					    </ul>
					</li>
					<li><a href="#">系统管理 </a>
					    <ul>
					      <li><a href="#">sub menu one</a></li>
					      <li><a href="#">sub menu one</a></li>
					      <li><a href="#">sub menu one</a></li>
					    </ul>
					</li>
				</ul>
			</div>
			<div class="marginTop">
				<label class="fontSize14">备注：该类型滑动导航需要引入slideMenu.css和slideMenu.js</label>
			</div>
			<p class="marginTop20">
				<label class="fontSize16 fontWeight color_3">类型二</label>
			</p>
			<div class="nav">
			    <ul class="menu">
			        <li><a href="javascript:;">HOME</a>
			            <ul class="submenu">
			                <li><a href="javascript:;">options</a></li>
			                <li><a href="javascript:;">options</a></li>
			                <li><a href="javascript:;">options</a></li>
			                <li><a href="javascript:;">options</a></li>
			                <li><a href="javascript:;">options</a></li>
			            </ul>
			        </li>
			        <li><a href="javascript:;">ABOUT</a>
			            <ul class="submenu">
			                <li><a href="javascript:;">options</a></li>
			                <li><a href="javascript:;">options</a></li>
			                <li><a href="javascript:;">options</a></li>
			            </ul>
			        </li>
			        <li><a href="javascript:;">TEAM</a></li>
			        <li><a href="javascript:;">NEWS</a></li>
			        <li><a href="javascript:;">JALLERY</a></li>
			        <li><a href="javascript:;">CONTENT</a></li>
			    </ul>
			</div>
			<div class="marginTop">
				<label class="fontSize14">备注：该类型滑动导航为纯css导航，需要引入对应的css，利用了css3动画，不兼容低版本浏览器，建议使用高版本浏览器，以达到更好的效果</label>
			</div>
			<p class="marginTop20">
				<label class="fontSize16 fontWeight color_3">类型三</label>
			</p>
			<div id="menuSy3">
			 	<ul class="menuSy3_menuUl">
			  		<li>文件
			   			<ul>
			    			<li><a href="#">新建</a></li> 
						    <li><a href="#">打开</a>
							     <ul>
							      <li><a href="#">文档</a></li>
							      <li><a href="#">图片</a></li>
							      <li><a href="#">视频</a></li>
							      <li><a href="#">音乐</a></li>
							     </ul> 
			    			</li>
			    			<li><a href="#">保存</a></li>
			    			<li><a href="#">导入</a></li>
			    			<li><a href="#">关闭</a></li>
			   			</ul>
			  		</li>
			  		<li>编辑
					   <ul>
					    	<li><a href="#">复制</a></li>
					    	<li><a href="#">黏贴</a></li>
					    	<li><a href="#">删除</a></li>
					    	<li><a href="#">替换</a></li>
					    	<li><a href="#">打印</a></li>
					   </ul>
			  		</li>
			  		<li>查看
					    <ul>
						    <li><a href="#">图层</a></li>
						    <li><a href="#">标尺</a></li>
						    <li><a href="#">查找</a></li>
						    <li><a href="#">格式</a></li>
						    <li><a href="#">图片</a></li>
					    </ul>
			  		</li>
			  		<li>窗口
			   				<ul>
							    <li><a href="#">工具</a>
							     	<ul>
									      <li><a href="#">显示</a></li>
									      <li><a href="#">隐藏</a></li>
									      <li><a href="#">增加</a></li>
									      <li><a href="#">删减</a></li>
									</ul>
			    				</li>
							    <li><a href="#">重置</a></li>
							    <li><a href="#">布局</a></li>
							    <li><a href="#">数据</a></li>
							    <li><a href="#">测试</a></li>
			  				</ul> 
			  		</li>
			 	 	<li>菜单
					   <ul>
						    <li><a href="#">管理</a></li>
						    <li><a href="#">添加</a></li>
						    <li><a href="#">导出</a></li>
						    <li><a href="#">参考</a> 
							    <ul>
							      	<li><a href="#">手册</a></li>
							      	<li><a href="#">导向</a></li>
							      	<li><a href="#">帮助</a></li>
							      	<li><a href="#">版本</a></li>
							     </ul>   
			    			</li>
			    			<li><a href="#">升级</a></li>
			   			</ul>  
					</li>
				</ul>
			</div>
			<div class="marginTop">
				<label class="fontSize14">备注：该类型滑动导航为纯css导航，有三级导航，需要引入对应的css。兼容IE8</label>
			</div>
		</div>
		<script type="text/javascript" src="style/js/base/jquery-1.9.1.min.js" ></script>
		<script type="text/javascript" src="style/js/common/slideMenu.js" ></script>
	</body>
</html>
